// 异步操作样板代码
// 1.创建store的写法保持不变，配置好同步修改状态的方法
// 2.单独封装一个函数，在函数内部return一个新函数，在新函数中
//    2.1 封装异步请求获取数据
//    2.2 调用同步actionCreater传入异步数据生成一个action对象，并使用dispatch提交
// 3.组件中dispatch的写法保持不变

import { useSelector, useDispatch } from "react-redux";
import { increment,decrement,addToNumber } from "./store/modules/counterStore"
import { fetchChannelList } from "./store/modules/channelStore";
import { useEffect } from "react";

function App() {
  const { count } = useSelector(state => state.counter)
  const { channelList } = useSelector(state => state.channel)
  //得到useDispatch函数
  const dispatch = useDispatch()

  //使用useEffect触发异步函数执行
  useEffect(()=>{
    dispatch(fetchChannelList())
  }, [dispatch])
  return (
    <div className="App">
      {/* 调用dispatch提交action函数 */}
      <button onClick={()=> dispatch(decrement())}>-</button>
      { count }
      <button onClick={()=> dispatch(increment())}>+</button>
      <button onClick={()=> dispatch(addToNumber(10))}>addToNumber10</button>
      <button onClick={()=> dispatch(addToNumber(20))}>addToNumber20</button>

      <ul>
        { channelList.map(item =><li key={item.id}>{item.name}</li>) }
      </ul>
    </div>
  );
}

export default App;
